<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">
				首页
			</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
			<el-breadcrumb-item>商品添加</el-breadcrumb-item>
		</el-breadcrumb>


		<el-form :model="Goodslist" ref="form" label-width="100px"
			style="margin-top: 20px;width: 50%;margin-left: 20%;">

			<el-form-item label="商品名称" prop="goods_name">
				<el-input v-model="Goodslist.goods_name"></el-input>
			</el-form-item>
			<el-form-item label="商品图片">
				<el-upload
				class="avatar-uploader"
				action="http://localhost:8080/goods/uploadImage"
				:show-file-list="false"
				:before-upload="beforeUpload"
				:on-success="uploadSuccess"	
				>
				<img v-if="imageUrl1" :src="imageUrl1" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				
			</el-form-item>
			<el-form-item label="商品价格" prop="goods_price" :rules="[
      { required: true, message: '价格不能为空'},
      { type: 'number', message: '价格必须为数字值哦',trigger: [ 'change'] }
    ]">
				<el-input v-model.number="Goodslist.goods_price"></el-input>
			</el-form-item>
			<el-form-item label="商品数量" prop="goods_number" :rules="[
      { required: true, message: '数量不能为空'},
      { type: 'number', message: '数量必须为数字值哦',trigger: [ 'blur','change']}
    ]">
				<el-input v-model.number="Goodslist.goods_number"></el-input>
			</el-form-item>
			<el-form-item label="商品描述" prop="goods_intro">
				<el-input v-model="Goodslist.goods_intro"></el-input>
			</el-form-item>

			<el-form-item label="商品分类" prop="category_name">
				<el-select v-model="Goodslist.category_name" placeholder="请选择">
					<el-option v-for="item in Categorylist" :key="item.category_id" :label="item.category_name"
						:value="item.category_name">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="商品状态" prop="goods_status">
				<el-select v-model="Goodslist.goods_status" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button type="primary" @click="onSubmit">添加</el-button>
				<el-button @click="getGoodslist()">重置</el-button>
			</el-form-item>

		</el-form>


	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'Add',
		data() {
			return {
				imageUrl1:'',
				imageUrl2:'',
				options: [{
					value: '出售',
					label: '出售'
				}, {
					value: '待售',
					label: '待售'
				}, ],
				id: 0,
				Categorylist: [],
				Goodslist: {},
				form: {
					category_id: 1001,
					goods_name: "",
					goods_status: "",
					goods_intro: "",
					goods_price: 100,
					goods_number: 100,
					goods_img:""

				},
			}
		},

		created() {
			this.getCategorylist()
		},

		methods: {
			beforeUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isPNG = file.type === 'image/png';
			  const isLt2M = file.size / 1024 / 1024 < 2;
			 
			  if (!(isJPG || isPNG)) {
					    this.$message.error('上传头像图片只能是JPG或是PNG格式!');
			  }
			  if (!isLt2M) {
			    this.$message.error('上传头像图片大小不能超过 2MB!');  
			  }
			  return (isJPG || isPNG) && isLt2M;
			},
			//这个上传成功的钩子函数会把后端的数据返回回来
			uploadSuccess(res, file) {
			  this.imageUrl1 = URL.createObjectURL(file.raw);//缓存中的图片路径，用来显示
			  this.imageUrl2 = res.url;//真实的图片路径，

				console.log(this.imageUrl1+this.imageUrl2);
			},
			onSubmit() {
				console.log(this.Goodslist.category_name)
			
				if(this.imageUrl1 == ''){
					this.form.goods_img = "D:/AShopMimg/xwk/default.jpg";
				}else{
					this.form.goods_img  = this.imageUrl2;
				}
				axios.get('http://localhost:8080/category/getCategoryIdByName?category_name='+this.Goodslist.category_name)
					.then((res) => {
						console.log(res.data)
						this.form.category_id = res.data.id.category_id;
						this.form.goods_name = this.Goodslist.goods_name;
						this.form.goods_status = this.Goodslist.goods_status;
						this.form.goods_intro = this.Goodslist.goods_intro;
						this.form.goods_price = this.Goodslist.goods_price;
						this.form.goods_number = this.Goodslist.goods_number;


						axios.get('http://localhost:8080/goods/add?goods_name='
						+this.form.goods_name
						+'&goods_price='+this.form.goods_price 
						+'&goods_number='+this.form.goods_number 
						+'&goods_intro='+this.form.goods_intro 
						+'&goods_status='+this.form.goods_status
						+'&category_id='+this.form.category_id
						+'&goods_img='+this.form.goods_img )
							.then((res) => {
								if (res.data.success) {
									this.$message({
										type: "success",
										message: "添加成功"
									});
									this.$router.push('/goods')

								} else {
									this.$message({
										type: "error",
										message: "添加失败"
									});
								}
							})

					})


			},

			getCategorylist() {
				axios.get('http://localhost:8080/category/findAllCategory')
					.then((res) => {
						this.Categorylist = res.data.all
					})

			}

		}
	}
</script>

<style scoped>
.avatar-uploader .el-upload {
	  border: 1px dashed black;
	  border-radius: 10px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  height: 100px;
	  width: 100px;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: blue;
	}
	.avatar{
		height: 150px;
		width: 150px;
	}
	.avatar-uploader-icon{

		font-size: 35px;
		line-height: 150px;
	}
</style>
